import React, { Component } from "react";

export default class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "晶犬",
      gener: "女",
      isRaad: false,
      addrs: [],
      city: "",
      citys: ["西安", "武汉", "东北", "长春"],
    };
  }

  changeValue = (e, key) => {
    this.setState({
      [key]: e.target.value,
    });
  };
  changeName = (ev) => {
    this.setState({
      username: ev.target.value,
    });
  };
  changeGeet = (e) => {
    this.setState({
      gener: e.target.value,
    });

    // 绑定事件 点击的元素的value值就等于gener
  };
  handoff = () => {
    this.setState({
      isRaad: !this.state.isRaad,
    });
  };

  changradd = (e) => {
    let idx = this.state.addrs.indexOf(e.target.value);
    if (idx > -1) {
      this.state.addrs.splice(idx, 1);
    } else {
      this.state.addrs.push(e.target.value);
    }
    this.setState({
      addrs: this.state.addrs,
    });
  };

  changecity = (e) => {
    this.setState({
      city: e.target.value,
    });
  };
  render() {
    return (
      <div>
        <h1>双向绑定</h1>
        {/* 文本框 */}
        <input
          type="text"
          value={this.state.username}
          onChange={this.changeName}
        />
        <hr></hr>
        {/* 单选 */}
        <input
          type="radio"
          id="female"
          value="女"
          name="gener"
          checked={this.state.gener === "女"}
          onChange={this.changeGeet}
        />{" "}
        <label htmlFor="nv">女</label>
        <input
          type="radio"
          id="man"
          value="男"
          name="gener"
          checked={this.state.gener === "男"}
          onChange={this.changeGeet}
        />{" "}
        <label htmlFor="nan">男</label>
        {/* 复选框 */}
        <input
          type="checkbox"
          id="read"
          checked={this.state.isRaad}
          onChange={this.handoff}
        />{" "}
        <label htmlFor="read">已阅读</label>
        {/* 多选 */}
        <hr />
        <input
          type="checkbox"
          value="唱"
          id="sing"
          checked={this.state.addrs.includes("唱")}
          onChange={this.changradd}
        />{" "}
        <label htmlFor="sing"> 唱</label>
        <input
          type="checkbox"
          value="跳"
          id="updang"
          checked={this.state.addrs.includes("跳")}
          onChange={this.changradd}
        />{" "}
        <label htmlFor="undang"> 跳</label>
        <input
          type="checkbox"
          value="rap"
          id="rap"
          checked={this.state.addrs.includes("rap")}
          onChange={this.changradd}
        />{" "}
        <label htmlFor="rap"> rap</label>
        <hr />
        <p>
          请选择城市
          <select value={this.state.city} onChange={this.changecity}>
            <option value="">---选择城市---</option>
            {this.state.citys.map((item, index) => (
              <option key={index} value={item}>
                {item}
              </option>
            ))}
          </select>
          {/* 1. 声明一个空字符串用来接收选中的内容  
              2. 声明一个数组，里面存放选项
              3. 将存放的选项使用map渲染到option中，
              4. 添加事件 选中的值，也就是item 将赋值给空字符串来接收，实现绑定
          */}
        </p>
      </div>
    );
  }
}
